<template>
  <div class="bigBox">
    <div class="catalogue">
      <ul class="tree-list">
        <tree-item v-for="(item, idx) in treeData" :treeData="treeData" :model="item" @delItem="delHandle"
          @addItem="addHandle" :isEdit="isEdit" :key="idx" @editItem="editHandle" />
      </ul>
    </div>
    <div class="content" v-show="isEdit">
      <textarea :autofocus="autofocus" name="" id="" cols="30" rows="10" v-model="editCon"
        @change="editItem"></textarea>
      <button class="submit" @click="editItem">确定</button>
    </div>
  </div>
</template>
  
<script>
import Item from './Item.vue'
import { toNumber } from '@vue/shared'

export default {
  components: { 'tree-item': Item },

  model: {
    prop: 'ids',
    event: 'change'
  },

  props: {
    treeData: {
      type: Array,
      default: function () {
        return []
      }
    },
    isEdit: {
      type: Boolean
    }
  },

  data() {
    return {
      treeData: this.$props.treeData,
      searchCon: '',
      targetPar: '',
      targetChild: '',
      editCon: '',
      autofocus: false,
      editPar: '',
      editChild: '',
    }
  },


  methods: {
    delHandle(parent, children) {
      console.log('jin');
      //二级标题
      if (children.depth == 2) {
        console.log(this.treeData[0]);
        this.treeData[0].children[parent.id].children.splice(children.id, 1)

        //更新父节点的状态
        if (parent.children.length == 0) {
          this.treeData[0].children[parent.id].isLeft = true
        }
        //更新所有子节点的id
        for (let i = 0; i < this.treeData[0].children[parent.id].children.length; i++) {
          this.treeData[0].children[parent.id].children[i].id = i
        }
      }

      //一级标题
      else if (children.depth == 1) {
        this.treeData[0].children.splice(children.id, 1)
        for (let i = 0; i < this.treeData[0].children.length; i++) {
          this.treeData[0].children[i].id = i
        }
      }
    },
    addHandle(parent) {
      let id = parent.children.length
      let depth = toNumber(parent.depth) + 1
      let children = {
        id: id,
        label: '',
        children: [],
        depth: depth,
        content: '',
        isLeft: true,
      }
      parent.children.splice(parent.children.length, 1, children)
      parent.isLeft = false
    },
    editHandle(parent, children) {
      if (children.depth == 2) {
        this.editCon = this.treeData[0].children[parent.id].children[children.id].content
      }
      else if (children.depth == 1) {
        this.editCon = this.treeData[0].children[children.id].content
      }
      if (children.depth == 2) {
        this.treeData[0].children[parent.id].children[children.id].content = this.editCon
      }
      else if (children.depth == 1) {
        this.treeData[0].children[children.id].content = this.editCon
      }
      this.editPar = parent
      this.editChild = children
    },
    editItem(){
      if (this.editChild.depth == 2) {
        this.treeData[0].children[this.editPar.id].children[this.editChild.id].content = this.editCon
      }
      else if (this.editChild.depth == 1) {
        this.treeData[0].children[this.editChild.id].content = this.editCon
      }
    }
    // search() {
    //   for (let i = 0; i < this.treeData[0].children.length; i++) {
    //     if (this.treeData[0].children[i].label == this.searchCon) {
    //       this.targetPar = -1
    //       this.targetChild = i
    //       this.$refs.treeItem.search(this.targetPar, this.targetChild)
    //       return
    //     }
    //     for (let u = 0; u < this.treeData[0].children[i].length; u++) {
    //       if (this.treeData[0].children[i].children[u].label == this.searchCon) {
    //         this.targetPar = i
    //         this.targetChild = u
    //         this.$refs.treeItem.search(this.targetPar, this.targetChild)
    //         return
    //       }
    //     }
    //     this.targetPar = -2
    //   }
    // },
  }, 
}
</script>
<style scoped>
.bigBox {
  width: 100%;
  height: 100%;
  display: flex;
}

.catalogue {
  width: 43%;
  height: 100%;
  position: relative;

}

.content {
  width: 57%;
  height: 335px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-end;
}

.content textarea {
  width: 100%;
  height: 295px;
  background-color: #ffffff;
  border: solid 1px #707070;
  resize: none;
  outline: none;
  padding: 2.6%;
  padding-top: 2.2%;
  font-family: Source Han Sans CN;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 27px;
  letter-spacing: 0px;
  color: #6f6f6f;
  display: block;
}

.submit {
  display: block;
  width: 100px;
  height: 30px;
  background-color: #e1e1e1;
  border: solid 1px #707070;
  font-family: Source Han Sans CN;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 27px;
  letter-spacing: 0px;
  cursor: pointer;
  color: #6f6f6f;
  margin-top: 1%;
}
</style>